<template>
  <div>
    <van-cell is-link @click="showPopup">
      <span class="spone">配送至：</span>
      <span class="sptwo">{{str}}</span>
    </van-cell>
    <van-popup v-model="show" position="bottom">
      <van-area
        :area-list="areaList"
        @confirm="select"
        :columns-placeholder="['省', '市', '区']"
        title="标题"
      />
    </van-popup>
  </div>
</template>
<script>
import areaList from "@/assets/address.js";
export default {
  data() {
    return {
      str: "广东省 深圳市 罗湖区 ",
      show: false,
      areaList: areaList
    };
  },

  methods: {
    showPopup() {
      this.show = true;
    },
    select(value) {
      console.log(value);
      let arr = value.map(item => {
        return item.name;
      });
      this.str = arr.join("-");
      console.log(this.str);
      this.show = false;
    }
  }
};
</script>
<style lang="css" scoped>
</style>
<style>
.spone {
  color: #797d82;
  font-size: 13px;
}
.sptwo {
  color: #3d3e3f;
  font-size: 14px;
}
</style>